<template>
  <el-drawer
    :visible.sync="drawerVisible"
    title="切换体系类型"
    size="60%"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer catalog-type-drawer"
    v-loading="loading"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <h4>标签体系名称：{{ catalogClassNm }}</h4>
        <ul class="clearfix">
          <li
            v-for="dict in $dictList('catalog_type')"
            :key="dict.key"
            :class="{ active: type === dict.key }"
            @click="type = dict.key"
          >
            <icon-svg :name="dict.key | iconFormatter"></icon-svg>
            {{ dict.value }}
          </li>
        </ul>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDialog">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      loading: false,
      catalogClassId: '',
      catalogClassNm: '',
      type: 0
    }
  },
  methods: {
    showDrawer(params) {
      this.catalogClassId = params.catalogClassId
      this.catalogClassNm = params.catalogClassNm
      this.type = params.catalogClassType
      this.drawerVisible = true
    },
    submit() {
      this.$confirm('确定切换为该体系？').then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.loading = true
        this.$ajax({
          url: this.$ajax.setUrl('dcl/dclAssetCatalogClass/type'),
          method: 'put',
          data: this.$ajax.setData({
            catalogClassId: this.catalogClassId,
            catalogClassType: this.type
          })
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$emit('callback')
            this.$message.success('操作成功')
            this.clearDialog()
          } else {
            this.$message.error(data.data || data.msg)
          }
          this.loading = false
        })
      })
    },
    clearDialog() {
      this.catalogClassId = ''
      this.catalogClassNm = ''
      this.type = 0
      this.drawerVisible = false
    }
  },
  filters: {
    iconFormatter(icon) {
      let iconName = ''
      switch (icon) {
        case 0:
          iconName = 'iconCommon'
          break
        case 1:
          iconName = 'iconBasic'
          break
        case 2:
          iconName = 'iconScene'
          break
        case 3:
          iconName = 'iconTouch'
          break
        case 4:
          iconName = 'iconPicture'
          break
        case 5:
          iconName = 'iconEvent'
          break
        default:
          iconName = 'iconCommon'
          break
      }
      return iconName
    }
  }
}
</script>

<style lang="scss">
.catalog-type-drawer {
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
      float: left;
      padding: 10px 50px;
      margin: 20px 20px 0 0;
      border: 1px solid $border-color;
      line-height: normal;
      cursor: pointer;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      &.active {
        color: $theme-color;
        border-color: $theme-color;
        &:before {
          display: block;
          width: 30px;
          height: 50px;
          content: '';
          background-color: $theme-color;
          position: absolute;
          right: -10px;
          bottom: -25px;
          transform: rotate(45deg);
        }
        &:after {
          width: 13px;
          height: 16px;
          content: '\2714';
          color: #fff;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
}
</style>
